<template>
  <div class="box">
    <!-- 1.nav-bar导航栏 -->
    <van-nav-bar>
      <!-- 1.1左侧vip -->
      <span slot="left" shape="round" @click="$router.push('/vip')">
        <van-icon name="vip-card-o" class="icon_left" />
      </span>
      <!-- 1.2中间标题 -->
      <van-search shape="round" background="#fff" placeholder="搜索热门演出" disabled slot="title" @click="$router.push('/search')" />
      <!-- 1.3右侧登录或者个人中心 -->
      <span v-if="!flaguser" slot="right" @click="$router.push('/login')">登录</span>
      <span v-else slot="right" @click="$router.push('/user')">
        <van-icon name="contact" class="icon_right" />
      </span>
    </van-nav-bar>
    <!-- 2.轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item of bannerlist" :key="item.bannerid" @click="goDetail(item.bannerid)">
         <img :src="item.img" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 3.nav导航 -->
    <van-grid :border="false" :column-num="4" clickable>
      <!-- 3.1给每一个格子绑定了一个点击事件并把值传过去 -->
      <van-grid-item v-for="item of navlist" :key="item.type_id" @click="navfn(item.type)">
        <img :src="item.pic" alt="" style="width: 50px" >
        <span text>{{ item.type }}</span>
      </van-grid-item>
    </van-grid>
    <!-- 4.VIP+会员 -->
    <div id="VIP" @click="$router.push('/vip')">
      <img src="https://image.juooo.com/group1/M00/04/3E/rAoKNV59VjuAVZjZAADjkFWRPc8459.png" alt="">
    </div>
    <!-- 5.0.1主页分类(除了为你推荐分类下的商品不用渲染为,将其他的商品都渲染出来) -->
    <div id="HomepageCategory">
      <div v-for="(item, index) of HomepageCategoryList" :key="index" >
        <!-- 5.1标题 -->
        <!-- 给整个标题加一个点击跳转分类列表页面并传值的事件 -->
        <div class="Title" @click="navfn(item)">
          <h1 style="font-size:20px">{{ item }}</h1>
          <span>全部 ></span>
        </div>
        <!-- 5.2.展示区:使用非为你推荐css样式 -->
        <!-- 在此处判断一下需要渲染的是否为为你推荐下的商品,不是为你推荐则就使用这个样式来渲染页面,是的话就不渲染了,我们使用分页获取全部数据,这个为你推荐中获取全部数据接口作废 -->
        <div class="ExhibitionArea" v-if="item !== '为你推荐'">
          <!-- 5.3每一个 -->
          <!-- 因为保存在数组中的是个二维数组,所以每次循环循环遍历是当前下标的列表数据,此处的index是外层v-for循环中的当签下标,这样就保证了当前展示区内展示的是当前类型中的商品 -->
          <!-- 给每一个商品添加一个点击跳转详情并传参的事件 -->
          <div v-for="item of prolist[index]" :key="item.schedular_id" @click="goDetail(item.schedular_id)">
            <img :src="item.pic" alt="">
            <!-- ui库的内置模块 -->
            <div class="van-multi-ellipsis--l2">{{item.name}}</div>
            <span><span>￥{{item.min_price}}</span>起</span>
          </div>
        </div>
      </div>
      <!-- 不知道哪出问题了,子组件没有生效,直接在此父组件中定义算了 -->
      <!-- <Prolist :prolist="prolist"></Prolist> -->
    </div>
    <!-- 5.0.2展示区: 使用为你推荐css样式 -->
    <!-- 这个是在上边除了为你推荐外的其他主页分类的商品渲染完成了之后使用分页获取全部数据 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" id="Recommend">
      <ul>
        <!-- <li v-for="item of PagingDataLiat" :key="item.proid"  @click="goDetail(item.proid)"> -->
          <!-- 右上角的城市名 -->
          <!-- <span class="city">{{item.city_name}}</span> -->
          <!-- 略缩图 -->
          <!-- <img :src="item.pic" alt=""> -->
          <!-- 商品名 -->
          <!-- ui库的内置模块最多只能显示两行并显示小数点 -->
          <!-- <div class="van-multi-ellipsis--l2"> -->
            <!-- 是否主办的小图标 -->
            <!-- <img v-show="item.method === 1" src="https://image.juooo.com/upload/i.png" alt="" style="width:33px;height:16px"> -->
            <!-- {{item.name}} -->
          <!-- </div> -->
          <!-- 时间 -->
          <!-- <p class="van-ellipsis">{{item.start_show_time.substring(0,10)}}&nbsp;{{item.show_time_bottom}}&nbsp;{{item.start_show_time.substring(11,16)}}</p> -->
          <!-- 价格 -->
          <!-- <span class="price"><span>￥{{item.min_price}}&nbsp;</span>起</span> -->
          <!-- 电子票 -->
          <!-- <p class="ETicket">电子票</p> -->
        <!-- </li> -->
        <li v-for="(itm, idx) in PagingDataLiat" :key="idx" @click="goDetail(itm.proid)">
          <img :src="itm.pic" alt="" class="pic">
          <span class="city">{{itm.city_name}}</span>
          <div>
            <p>
              <img v-show="itm.method === 1" src="https://image.juooo.com/upload/i.png" alt="">
              {{itm.name}}
            </p>
            <span>{{itm.start_show_time.substring(0,10)}}&nbsp;{{itm.show_time_bottom}}&nbsp;{{itm.start_show_time.substring(11,16)}}</span>
            <span>{{'￥' + itm.min_price}}&nbsp;&nbsp;<b>起</b></span>
            <span><b>{{itm.support_desc}}</b></span>
          </div>
        </li>
      </ul>
    </van-list>
    <div class="goTop" @click="goTop" v-if="goTopShow">
      <img class="goTop_pic" src="" alt="">
      <!-- <van-icon name="arrow-up" class="goTop_icon" /> -->
      <!-- <p>返回顶部</p> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// 引入请求数据的接口
import { getbanner, getnav, getHomepageCategoryList, GetTypeHomepageCategoryData, getProList } from '@/api'
// 引入ui库
import { NavBar, Toast, Search, Icon, Swipe, SwipeItem, Lazyload, Grid, GridItem, List } from 'vant'
// 引入次级组件即components中定义的pro列表组件,即作为该组件的子组件来引入并注册
// 不知道哪里出问题了,
// import Prolist from '@/components/proList'
// 注册ui库
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Search)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(List)
export default {
  data () {
    return {
      bannerlist: [], // 轮播图数组
      navlist: [], // nav导航数组
      HomepageCategoryList: [], // 主页分类数组
      prolist: [], // 主页分类下的列表数据数组
      PagingDataLiat: [], // 主页分类为为你推荐的时候,分页获取所有数据的数组
      loading: false, // 控制list上拉列表,到底的时候为true就请求出来数据并渲染后,再设置为false,即加载状态
      finished: false, // 当加载完毕之后设置为true显示,加载完成的提示
      count: 1, // 默认会添加第0页的数据，从1开始
      flaguser: false, // 判断用户是否已登录,初始值为false,由登录以后保存在localStroage中的loginState来判断,这种方法存在非常大的安全隐患(会被篡改),后期会进行修改
      goTopShow: false
    }
  },
  // 局部注册次级子组件
  // 不知道哪里出问题了渲染失败了
  // components: {
  //   // Prolist
  // },
  // 钩子函数请求数据
  mounted () {
    // 获取localStorage判断是否登录
    this.flaguser = localStorage.getItem('loginState') === 'ok'
    // 获取轮播图数据
    getbanner().then((res) => {
      // console.log('加载到轮播图数据')
      this.bannerlist = res.data.data
    })
    // 获取nav导航数据
    getnav().then((res) => {
      // console.log('请求到nav导航的数据')
      // console.log(res.data.data)
      this.navlist = res.data.data
    })
    // 获取主页分类数据
    getHomepageCategoryList().then((res) => {
      // console.log('加载到主页分类数据')
      // console.log(res.data.data)
      this.HomepageCategoryList = res.data.data
      // 获取主页分类下的数据
      // 循环遍历主页分类数据取出其中的分类数据并当作参数请求分类下的数据
      for (let i = 0; i < this.HomepageCategoryList.length; i++) {
        const str = this.HomepageCategoryList[i]
        GetTypeHomepageCategoryData({ title: str }).then((res) => {
          // console.log('请求到主页分类下的列表数据')
          // console.log(res.data.data)
          this.prolist.push(res.data.data)
          // console.log(this.prolist[0])
        })
      }
    })
    window.addEventListener('scroll', this.scrollToTop)
  },
  // vue 计算属相
  methods: {
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 2400) {
        this.goTopShow = true
      } else {
        this.goTopShow = false
      }
    },
    goTop () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    // 点击nav导航触发事件并接收参数
    navfn (type) {
      if (type === '为你推荐') {
        type = '全部' // 点击分类下列表的事件中有个为你推荐加载的是全部的列表数据,相对应的分类的列表中显示全部的用的是全部的字段,所以在这里判断一下然后再传值跳转
      }
      // console.log(type)
      this.$router.push({ path: '/kind/' + type })
    },
    // 列表ui库的加载事件
    // onLoad () {},
    // 点击跳转到详情的事件
    goDetail (data) {
      if (data === '1') {
        this.$router.push('/vip')
      } else {
        this.$router.push({ path: '/detail', query: { proid: data } })
      }
    },
    // 上拉加载
    // 检测滚动条触底事件，执行下一页的请求数据，数据的拼接
    onLoad () {
      // console.log('\n触发本页的底部加载下一页数据')
      this.loading = true // 表示开始加载了
      getProList({ limit: 20, count: this.count }).then(res => {
        // console.log(res)
        this.loading = false // 表示结束加载了
        // 如果没有数据
        if (res.data.len === 0) { // res.data.data.length
          this.finished = true // 表示数加载完毕了
        } else {
          // 有数据 拼接数据  ---   合并数组
          // concat [...this.PagingDataLiat, ...res.data.data]
          this.PagingDataLiat = [...this.PagingDataLiat, ...res.data.data]
          // 页面加1
          this.count += 1
        }
        // console.log(this.PagingDataLiat)
      })
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  }
}
</script>

<style lang="scss" scoped>
.van-grid {
  margin: 0.16rem 0 0 0;
}
.iconfont {
  font-size: 25px;
}
.van-nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 100;
  .icon_left {
    font-size: 0.24rem;
    color: red;
    margin-top: 0.15rem;
  }
  .icon_right {
    font-size: 0.24rem;
    color: #666666;
    margin-top: 0.15rem;
  }
}
.my-swipe {
  margin-top: 0.46rem;
}
.van-search{
  padding: 5px 12px;
}
.my-swipe .van-swipe-item {
  margin-top: .10rem;
  padding: 0 0.15rem;
  color: #fff;
  font-size: .2rem;
  line-height: 1.5rem;
  text-align: center;
  img{
    height: 1.5rem;
    width: 100%;
    border-radius: .10rem;
  }
}
#VIP{
  margin-top: 20px;
  text-align: center;
  img{
    height: 1rem;
    width: 95%;
    border-top-right-radius: .70rem;
    border-bottom-right-radius: .70rem;
    border-top-left-radius: .70rem;
    border-bottom-left-radius: .70rem;
  }
}
// 主页下分类非为你推荐
#HomepageCategory{
  div{
    padding: 0 .10rem;
    // 标题
    .Title{
      margin: .15rem 0;
      /* background: rgb(248, 248, 248); */
      display: flex;
      justify-content: space-between;
      line-height: 0.3rem;
    }
    // 商品显示区域,样式1
    .ExhibitionArea{
      height: auto;
      width: 100%;
      overflow: auto;
      display: flex;
      // 每一件商品
      div{
        width:1.30rem;
        padding: 0.02rem;
        margin: 0 .05rem;
        img{
          width:1.30rem;
        }
        // ui库的内置的最多显示两行并显示省略号
        .van-multi-ellipsis--l2{
          // 强制不让其在标点符号或者空白处换行
          word-break: break-all;
        }
        span{
          color: rgb(141, 132, 132);
          span{
            font-size: 18px;
            color: red;
          }
        }
      }
    }
  }
}
// 主页下分类中为你推荐
#Recommend{
  ul {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0.1rem 0.15rem;
    overflow: hidden;
    /* margin-bottom: 0.5rem; */
    li {
      width: 49%;
      /* height: 3.68rem; */
      height: auto;
      border-radius: 0.04rem;
      overflow: hidden;
      float: left;
      margin-bottom: 0.08rem;
      background: #f5f5f5;
      position: relative;
      .pic {
        width: 100%;
        height: 2.31rem;
      }
      .city {
        position: absolute;
        padding: 0 0.05rem;
        height: 0.18rem;
        text-align: center;
        line-height: 0.18rem;
        background-image: linear-gradient(-45deg, rgba(38, 38, 38, 0.8), rgba(70, 68, 65, 0.8));
        right: 0.1rem;
        top: 0.05rem;
        color: #fefefe;
        font-size: 0.12rem;
        border-radius: 0.02rem;
      }
      div {
        width: 100%;
        height: 1.36rem;
        box-sizing: border-box;
        padding: 0.08rem 0.11rem 0.11rem 0.11rem;
        p {
          line-height: 0.2rem;
          height: 0.4rem;
          color: #232323;
          font-size: 0.14rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-align: left;
          img {
            width: 0.33rem;
            height: 0.17rem;
            display: inline-block;
          }
        }
        span {
          width: 100%;
          height: 0.2rem;
          margin-top: 0.04rem;
          line-height: 0.2rem;
          display: block;
          text-align: left;
        }
        span:nth-of-type(1) {
          color: #666666;
          font-size: 0.14rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        span:nth-of-type(2) {
          color: #ff6743;
          font-size: 0.15rem;
          b {
            font-weight: normal;
            font-size: 0.12rem;
            color: #999999;
          }
        }
        span:nth-of-type(3) {
          b {
            float: left;
            padding: 0 0.05rem;
            height: 0.18rem;
            line-height: 0.18rem;
            background: #FFF1D5;
            color: #FF6743;
            font-size: 0.12rem;
            font-weight: normal;
            border-radius: 0.05rem;
          }
        }
      }
    }
    li:nth-of-type(2n-1) {
      margin-right: 2%;
    }
  }
  /* ul{
    padding: .05rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li{
      margin-top: .20rem;
      width:45%;
      height: auto;
      position: relative;
      .city{
        position: absolute;
        top: .05rem;
        right: .1rem;
        padding: 0 .05rem;
        height: 18px;
        text-align: center;
        line-height: .18rem;
        background: rgb(56, 54, 54);
        opacity: .8;
        color: #fefefe;
        font-size: .12rem;
        border-radius: .02rem;
      }
      img{
        width: 100%;
      }
      // 商品名
      // ui库的内置的最多显示两行并显示省略号
      .van-multi-ellipsis--l2{
        margin-top: .10rem;
        // 强制不让其在标点符号或者空白处换行
        word-break: break-all;
      }
      // 时间
      // ui库的内置的最多显示一行并显示省略号
      .van-ellipsis{
        // 强制不让其在标点符号或者空白处换行
        word-break: break-all;
      }
      .price{
        span{
          font-size: .20rem;
          color: red;
        }
      }
      .ETicket{
        color: red;
        font-size: .20rem;
      }
    }
  } */
}
.goTop {
  position: fixed;
  right: 0;
  bottom: 0.7rem;
  width: 0.4rem;
  height: 0.4rem;
  text-align: center;
  z-index: 20;
  .goTop_pic {
    width: 0.4rem;
    height: 0.4rem;
  }
}
/deep/ .van-nav-bar__title {
  max-width: 80%;
}
/deep/ .van-grid-item__content {
  padding: 0;
}
</style>
